/*
 * 店铺列表
 * @Author: ljb
 * @Date: 2018-03-27 17:53:05
 * @Last Modified by: ljb
 * @Last Modified time: 2019-03-12 09:45:48
 */
<style lang="less" rel="stylesheet/less" type="text/less">
	.v-customer-store-index{
		.thumb{
			display: inline-block;
			width: 80px;
			height: 80px;
			position: relative;
			margin: 5px;
		}
		.thumb > img {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			max-width: 100%;
			max-height: 100%;
			cursor: pointer;
		}
	}
</style>
<template>
	<div class="v-customer-store-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="stores"
			:height="tableHeight()"
			class="personal-scrollbar"
			border/>

	</div>
</template>

<script>

import { mapGetters } from 'vuex';
// import API_LIST from 'src/API_LIST';
import Button from 'iview/src/components/button';
import Icon from 'iview/src/components/icon';
import showPictureMixin from 'src/views/mixins/showPictureMixin';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';
import expandRow from './expand-row';

export default {
	name: 'CustomerStoreIndex',
	mixins: [showPictureMixin, computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		stores: {
			type: Array,
			default() {
				return [];
			},
		},
		fetchStoreTokenOnce: {
			type: Function,
			required: true,
		},
	},
	data() {
		return {
			columnsList: [],
			columns: [], // 表格数据
		};
	},
	computed: {
		...mapGetters('userToken', ['getUserInfo']),
	},
	created() {
		switch (String(this.getUserInfo.has_youzan)) {
		case '1':
			this.columnsList = ['expand', 'name', 'phone', 'type', 'address', 'open_status', 'image', 'created_at', 'has_youzan', 'operation'];
			break;
		default:
			this.columnsList = ['expand', 'name', 'phone', 'type', 'address', 'open_status', 'image', 'created_at', 'operation'];
			break;
		}
		this.columns = this.getTableColumns();
	},
	methods: {

		/**
		 * 手动拼接表格数据
		 * @return {undefined}
		 */
		getTableColumns() {
			const tableColumnsList = {
				expand: {
					type: 'expand',
					width: 50,
					render: (h, params) => h(expandRow, {
						props: {
							row: params.row.store_admins,
							accessStore: this.accessStore,
							is_deleted: !!params.row.is_deleted,
						},
					}),
				},
				name: {
					title: this.$t('store.name'),
					key: 'name',
					align: 'center',
					render: (h, { row }) => <div> { row.name || '-' } </div>,
				},
				phone: {
					title: this.$t('store.phone'),
					key: 'phone',
					align: 'center',
					render: (h, { row }) => <div> { row.phone || '-' } </div>,
				},
				type: {
					title: this.$t('store.type'),
					key: 'type',
					align: 'center',
					render: (h, { row }) => <div> { Number(row.type) === 1 ? this.$t('product.headquarters') : this.$t('product.subbranch') || '-' } </div>,
				},
				address: {
					title: this.$t('store.address'),
					key: 'address',
					align: 'center',
					render: (h, { row }) => <div> { this.joinAddress(row) || '-' } </div>,
				},
				open_status: {
					title: this.$t('store.store_status'),
					key: 'is_deleted',
					align: 'center',
					render: (h, { row }) => <div>
						{
							Number(row.is_deleted) === 0
								? <Icon type="checkmark"></Icon>
								: <Icon type="close"></Icon>
						}
					</div>,
				},
				image: {
					title: this.$t('store.store_logo'),
					key: 'store_img',
					align: 'center',
					render: (h, { row }) => {
						const store_img = row.store_img ? <img onClick={() => this.showPicture(row.store_img)} src={ row.store_img } alt={this.$t('common.none')}/> : this.$t('common.none');
						return (<div class="thumb">{store_img}</div>);
					},
				},
				created_at: {
					title: this.$t('common.created_at'),
					key: 'created_at',
					align: 'center',
					render: (h, { row }) => <div> { row.created_at || '-' } </div>,
				},
				has_youzan: {
					title: this.$t('store.has_youzan'),
					key: 'has_youzan',
					align: 'center',
					render: (h, { row }) => <div> { Number(row.has_youzan) === 0 ? <Icon type="close"></Icon> : <Icon type="checkmark"></Icon> || '-' } </div>,
				},
				operation: {
					title: this.$t('common.operation'),
					align: 'center',
					width: 200,
					render: (h, { row }) => (
						<div>

							<Button name="create__edit" size="small" on-click={() => { this.$emit('edit', row); }} type="primary">
								{this.$t('common.edit')}
							</Button>
							{
								row.is_deleted
									?
									<Button name="create__enable" size="small" style={{ marginLeft: '10px' }} on-click={() => { this.$emit('recovery', row); }} type="success">
										{this.$t('store.enable')}
									</Button>
									:
									<Button name="create__disable" size="small" style={{ marginLeft: '10px' }} on-click={() => { this.$emit('ban', row); }} type="error">
										{this.$t('store.disable')}
									</Button>
							}

						</div>),
				},
			};
			const data = [];

			this.columnsList.forEach(col => data.push(tableColumnsList[col]));

			return data;
		},

		/**
		* 组合地址
		* @param  {Object} row {行对应的对象}
		* @return {string} {拼接完成的地址}
		*/
		joinAddress(row) {
			return (row.province || '') + (row.city || '') + (row.district || '') + (row.address || '');
		},

		/**
		 * 访问store
		 * @param {string} account {账号}
		 * @param {String} id {店铺id}
		 * @param {String} is_disable {账号启用状态}
		 * @return {undefined}
		 */
		accessStore(account, id, is_disable) {
			if (is_disable) {
				this.$Message.error(this.$t('customer.disable_tips'));
				return;
			}
			this.fetchStoreTokenOnce(id)
				.then((token) => {
					if (token) {
						this.openWindow(account, token);
					}
				});
		},

		/**
		 * 打开新窗口
		 * @param {String} account {账号}
		 * @param {String} token
		 * @return {undefined}
		 */
		openWindow(account, token) {
			const language = this.$i18n.locale;
			const path = `${window.location.pathname}?lang=${language}`;
			const hash = `#/store-login?account=${account}&token=${token}`;
			const url = window.location.origin + path + hash;
			const width = 1820;
			const Height = 800;
			const left = (window.screen.width - width) / 2;
			const top = (window.screen.availHeight - Height) / 2;
			const newWindow = window.open(url, '_blank', `width=${width}, height=${Height}, left=${left}, top=${top}, toolbar=no, location=no, directories=no, status=no, menubar=no, fullscreen=yes`);
			// const newWindow = window.open(url);
			if (newWindow) {
				newWindow.focus();
			}
		},

	},
};
</script>
